<template>
    <div class="login">
        <h3>please login first!</h3>
        <div>
            <p>
                account : 
                <input 
                    type="text" name="username" v-model="userinfo.username" placeholder="please input your account" />
            </p>
            <p>
                password : 
                <input 
                    type="text" name="password" v-model="userinfo.password" placeholder="please input your password" />
            </p>
            <p>
                <button v-on:click="login">login</button>
            </p>
        </div>
    </div>
</template>

<script lang="ts">
    import { defineComponent } from 'vue'
    import UserService from "../../services/user"
    import {tokenKey,userinfoKey} from "./../../utils/constants"
    import { mapActions } from "vuex"
    
    /**
     * 1、mapActions如果带命名空间就不好用简写的形式，当前demo采用的方式是一个比较好的方式；
     * 2、this.$store是没有问题的，但是ts报错很烦，网上添加vuex.d.ts文件，可以直接是@ts-ignore；
     *      ts不影响运行。
     * 3、ts看着很牛逼，网上多数人还是觉得烦，这里因为是学习，实际项目还是不要选择typescript，
     *      要知道es6 + babel提供的类、机制实在是够用啦。
     */

    export default defineComponent({
        setup() {},
        data(){
            return {
                userinfo:{
                    username:"admin",
                    password:"123456"
                }
            }
        },
        methods:{
            login(){
                UserService.login(this.userinfo).then((response)=>{
                    console.log(response);
                    // age: 25
                    // birthDay: null
                    // id: 10086
                    // password: null
                    // realName: "戴瑞"
                    // registerDate: null
                    // sex: "女"
                    // token: "eyJ0eXAiOiJKV1Qi.....................JIUzqx5l6rjYFW6coBEJUw"
                    // username: "admin"
                    let user=response.data.data;                  
                    window.localStorage.setItem(tokenKey,user.token);
                    window.localStorage.setItem(userinfoKey,JSON.stringify(user));

                    this.getUser(user);
                    this.$router.push({
                        path:"/"
                    })
                });
            },
            ...mapActions({
                getUser:"user/getUser"
            })
        },
        mounted(){
            //@ts-ignore
            console.log(this.$store);
        }
    })
</script>

<style lang="less" scoped>
    .login{     
        overflow: hidden;  /* 操了，如果第一个子元素有margin则发生margin穿透 */
    }
</style>
